<template>
  <div class="memberScale">
    <span class="memberScale-title">
      构件比例
      <img src="/static/img/large.png" title="全屏展示" class="full-btn" />
    </span>
    <div id="memberScale-contents"></div>
  </div>
</template>
<script>
import { elecSandTableApi } from "@/services/WorkCenter";
export default {
  data() {
    return {
      echartStyle: {},
      echartData:[],
    };
  },
  methods: {
    getEchartData() {
      elecSandTableApi
        .getMemberScaleData({
          params:{
            field:'cp_type'
          }
        })
        .then(res => {
          this.echartData=JSON.parse(JSON.stringify(res.data).replace(/total/g, 'value'));
          this.echartData[0].selected=true
          this.initCharts()
        })
        .catch(error => {
          console.log(error);
        });
    },
    initCharts() {
      let Chart = this.$echarts.init(
        document.getElementById("memberScale-contents")
      );
      // 绘制图表
      Chart.resize();
      this.echartStyle = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
         color: [
					'#58C2DB', '#C39748','#DB7459', '#D74088', '#6359E1', '#B85EE4', '#db7459', '#61D857','#C3CFF6',
				],
        legend: {
          orient: "vertical",
          left: "0",
          top: "15%",
          textStyle: {
            color: "#fff"
          },
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
          selected: {
            直接访问: true
          }
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "70%"],
            // center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "22",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },

            data: this.echartData
          }
        ]
      };
      Chart.setOption(this.echartStyle);
      window.addEventListener("resize", function() {
        Chart.resize();
      });
    }
  },
  mounted() {
    this.getEchartData()
  }
};
</script>
<style lang="scss" scoped>
.memberScale {
  .memberScale-title {
    color: #FFA201;
    font-size: 16px;
    padding-left: 3%;
    display: block;
    margin: 1vh 2% 0 2%;
    position: relative;
    .full-btn {
      position: absolute;
      right: 5px;
      top: 3px;
      cursor: pointer;
    }
  }
  #memberScale-contents {
    width: 100%;
    height: 100%;
  }
}
</style>